<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>新能源车联网综合大数据平台</title>
    <link rel="stylesheet" href="https://unpkg.com/layui@2.6.7/dist/css/layui.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2518205_jqhuin5qd7.css">
    <link rel="stylesheet" href="">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/map.css">
    <script src="js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var html = $(".wrap ul").html()
            $(".wrap ul").append(html)
            var ls = $(".wrap li").length / 2 + 1
            i = 0
            ref = setInterval(function () {
                i++
                if (i == ls) {
                    i = 1
                    $(".wrap ul").css({
                        marginTop: 0
                    })
                    $(".wrap ul").animate({
                        marginTop: -'46' * i + 'px'
                    }, 1000)
                }
                $(".wrap ul").animate({
                    marginTop: -'46' * i + 'px'
                }, 1000)
            }, 2400);
            var html2 = $(".adduser ul").html()
            $(".adduser ul").append(html2)
            var ls2 = $(".adduser li").length / 2 + 1
            a = 0
            ref = setInterval(function () {
                a++
                if (a == ls2) {
                    a = 1
                    $(".adduser ul").css({
                        marginTop: 0
                    })
                    $(".adduser ul").animate({
                        marginTop: -'53' * a + 'px'
                    }, 1000)
                }
                $(".adduser ul").animate({
                    marginTop: -'53' * a + 'px'
                }, 1000)
            }, 4300);
        })
    </script>
</head>

<body>
    <div class="data">
        <div class="data-title">
            <div class="data_title_inner">
                <div class="data_title_lf">
                    <span class="col_fff col_18 blod" id="tem"></span>
                    <span id="showTime">
                    </span>
                </div>
                <div class="data_title_cent">
                    <img src="img/title.png" alt="">
                    <!-- <em class="fnt_28 col_fff bld">车辆事故与安全服务平台</em> -->
                </div>
                <div class="data_title_rt">
                    <div class="lang">
                        <a href="#" class="col_fff"> <i class="iconfont icon-yonghutouxiang"></i> 2222
                            <em class="iconfont icon-down-fill1-xs"></em> </a>
                        <div class="lang_hide">
                            <a href="#" class="col_fff"> 退出 </a>
                        </div>
                    </div>
                    <div class="tong">
                        <i class="iconfont icon-tongzhi"></i> <em class="fnt_14 col_fff"> 通知 </em>
                        <span> 1 </span>
                    </div>
                    <a href="#" class="got"> <i class="iconfont icon-pingtaizijiankong"></i> <em
                            class="fnt_14 col_fff">管理平台</em>
                    </a>
                </div>
            </div>
        </div>
        <div class="data-content">
            <div class="con-left fl">
                <div class="left-top">
                    <div class="title">
                        <h1> <i></i> <i></i> </h1> 事故分类统计
                    </div>
                    <div id="echarts_6" class="charts"></div>
                </div>
                <div class="left-center">
                    <div class="top-bottom">
                        <div class="title">
                            <h1> <i></i> <i></i> </h1> 各省份事故统计
                        </div>
                        <div class="charts">
                            <div class="progress">
                                <ul>
                                    <li>
                                        <div class="progress_lf">
                                            <img src="img/1.png" alt="">
                                        </div>
                                        <div class="progress_rt">
                                            <h4> <em class="col_fff fnt_16 bld">北京市 </em> <em
                                                    class="col_fff fnt_16 ">1658</em> </h4>
                                            <div class="layui-progress">
                                                <div class="layui-progress-bar" lay-percent="40%"></div>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="progress_lf">
                                            <img src="img/2.png" alt="">
                                        </div>
                                        <div class="progress_rt">
                                            <h4> <em class="col_fff fnt_16 bld">北京市 </em> <em
                                                    class="col_fff fnt_16 ">1658</em> </h4>
                                            <div class="layui-progress">
                                                <div class="layui-progress-bar" lay-percent="40%"></div>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="progress_lf">
                                            <img src="img/3.png" alt="">
                                        </div>
                                        <div class="progress_rt">
                                            <h4> <em class="col_fff fnt_16 bld">北京市 </em> <em
                                                    class="col_fff fnt_16 ">1658</em> </h4>
                                            <div class="layui-progress">
                                                <div class="layui-progress-bar" lay-percent="40%"></div>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="progress_lf">
                                            <img src="img/4.png" alt="">
                                        </div>
                                        <div class="progress_rt">
                                            <h4> <em class="col_fff fnt_16 bld">北京市 </em> <em
                                                    class="col_fff fnt_16 ">1658</em> </h4>
                                            <div class="layui-progress">
                                                <div class="layui-progress-bar" lay-percent="40%"></div>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="progress_lf">
                                            <img src="img/5.png" alt="">
                                        </div>
                                        <div class="progress_rt">
                                            <h4> <em class="col_fff fnt_16 bld">北京市 </em> <em
                                                    class="col_fff fnt_16 ">1658</em> </h4>
                                            <div class="layui-progress">
                                                <div class="layui-progress-bar" lay-percent="40%"></div>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="progress_lf">
                                            <img src="img/6.png" alt="">
                                        </div>
                                        <div class="progress_rt">
                                            <h4> <em class="col_fff fnt_16 bld">北京市 </em> <em
                                                    class="col_fff fnt_16 ">1658</em> </h4>
                                            <div class="layui-progress">
                                                <div class="layui-progress-bar" lay-percent="40%"></div>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="progress_lf">
                                            <img src="img/7.png" alt="">
                                        </div>
                                        <div class="progress_rt">
                                            <h4> <em class="col_fff fnt_16 bld">北京市 </em> <em
                                                    class="col_fff fnt_16 ">1658</em> </h4>
                                            <div class="layui-progress">
                                                <div class="layui-progress-bar" lay-percent="40%"></div>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="progress_lf">
                                            <img src="img/8.png" alt="">
                                        </div>
                                        <div class="progress_rt">
                                            <h4> <em class="col_fff fnt_16 bld">北京市 </em> <em
                                                    class="col_fff fnt_16 ">1658</em> </h4>
                                            <div class="layui-progress">
                                                <div class="layui-progress-bar" lay-percent="40%"></div>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="left-bottom">
                    <div class="title">
                        <h1> <i></i> <i></i> </h1> 事故分类统计
                    </div>
                    <div class="charts">
                        <div class="gu_tit">
                            <div class="gu_tit_item">
                                <div class="gu_tit_lf">
                                    <img src="img/gu1.png" alt="">
                                    <p class="col_fff"> 研究机构总计 </p>
                                </div>
                                <div class="gu_tit_rt">
                                    <em class="bld fnt_22 lv"> 24 </em> <em class="fnt_12 lv"> 家 </em>
                                </div>
                            </div>
                            <div class="gu_tit_item">
                                <div class="gu_tit_lf">
                                    <img src="img/gu2.png" alt="">
                                    <p class="col_fff"> 机构人员 </p>
                                </div>
                                <div class="gu_tit_rt">
                                    <em class="bld fnt_22 huang"> 24 </em> <em class="fnt_12 huang"> 家 </em>
                                </div>
                            </div>
                        </div>
                        <div id="echarts_5"></div>
                    </div>
                  
                   
                </div>
            </div>
            <div class="con-center fl">
                <div class="map-num">
                    <div class="map-num_inner">
                        <ul>
                            <li>
                                <a href="">
                                    <h4> <img src="img/ttop1.png" alt="">
                                        <em class="col_fff fnt_16 bld">交通事故发生数</em>
                                    </h4>
                                    <div class="map-num_text">
                                        <h1 class="fnt_40 col_c bld">9536</h1>
                                        <div class="map-num_rt">
                                            <h3 class="col_fff">昨日新增</h3>
                                            <h5> <em class="fnt_18">33</em> <i
                                                    class="iconfont  icon-down-fill-copy"></i> </h5>
                                        </div>
                                    </div>
                                </a>

                            </li>

                            <li>
                                <a href="">
                                    <h4> <img src="img/ttop2.png" alt="">
                                        <em class="col_fff fnt_16 bld">火灾事故发生数</em>
                                    </h4>
                                    <div class="map-num_text">
                                        <h1 class="fnt_40 col_c bld">9536</h1>
                                        <div class="map-num_rt">
                                            <h3 class="col_fff">昨日新增</h3>
                                            <h5> <em class="fnt_18">33</em> <i
                                                    class="iconfont  icon-down-fill-copy"></i> </h5>
                                        </div>
                                    </div>
                                </a>

                            </li>
                            <li>
                                <a href="">
                                    <h4> <img src="img/ttop3.png" alt="">
                                        <em class="col_fff fnt_16 bld">氢能源故障发生数</em>
                                    </h4>
                                    <div class="map-num_text">
                                        <h1 class="fnt_40 col_c bld">9536</h1>
                                        <div class="map-num_rt">
                                            <h3 class="col_fff">昨日新增</h3>
                                            <h5> <em class="fnt_18">33</em> <i
                                                    class="iconfont  icon-down-fill-copy"></i> </h5>
                                        </div>
                                    </div>
                                </a>

                            </li>
                            <li>
                                <a href="">
                                    <h4> <img src="img/ttop4.png" alt="">
                                        <em class="col_fff fnt_16 bld">事故死亡人数</em>
                                    </h4>
                                    <div class="map-num_text">
                                        <h1 class="fnt_40 col_c bld">9536</h1>
                                        <div class="map-num_rt">
                                            <h3 class="col_fff">昨日新增</h3>
                                            <h5> <em class="fnt_18">33</em> <i
                                                    class="iconfont  icon-down-fill-copy"></i> </h5>
                                        </div>
                                    </div>
                                </a>

                            </li>

                        </ul>
                    </div>

                </div>
                <div class="cen-top" id="map"></div>
            </div>
            <div class="con-right fr">
                <div class="right-top">
                    <div class="title">
                        <h1> <i></i> <i></i> </h1> 参与方分类统计
                    </div>
                    <div class="charts">
                        <div class="fen">
                            <ul>
                                <li>
                                    <div class="fen_lf">
                                        <img src="img/11.png" alt="">
                                    </div>
                                    <div class="fen_cent">
                                        <h4 class="fnt_24 col_fff bld">1623</h4>
                                        <h3 class="fnt_14">乘用车</h3>
                                    </div>
                                    <div class="fen_rt" id="cart1">
                                    </div>
                                </li>
                                <li>
                                    <div class="fen_lf">
                                        <img src="img/22.png" alt="">
                                    </div>
                                    <div class="fen_cent">
                                        <h4 class="fnt_24 col_fff bld">1623</h4>
                                        <h3 class="fnt_14">客车</h3>
                                    </div>
                                    <div class="fen_rt" id="cart2">

                                    </div>
                                </li>
                                <li>
                                    <div class="fen_lf">
                                        <img src="img/33.png" alt="">
                                    </div>
                                    <div class="fen_cent">
                                        <h4 class="fnt_24 col_fff bld">1623</h4>
                                        <h3 class="fnt_14">货车</h3>
                                    </div>
                                    <div class="fen_rt" id="cart3">

                                    </div>
                                </li>
                                <li>
                                    <div class="fen_lf">
                                        <img src="img/44.png" alt="">
                                    </div>
                                    <div class="fen_cent">
                                        <h4 class="fnt_24 col_fff bld">1623</h4>
                                        <h3 class="fnt_14">半挂牵引</h3>
                                    </div>
                                    <div class="fen_rt" id="cart4">

                                    </div>
                                </li>
                                <li>
                                    <div class="fen_lf">
                                        <img src="img/55.png" alt="">
                                    </div>
                                    <div class="fen_cent">
                                        <h4 class="fnt_24 col_fff bld">1623</h4>
                                        <h3 class="fnt_14">挂车</h3>
                                    </div>
                                    <div class="fen_rt" id="cart5">

                                    </div>
                                </li>
                                <li>
                                    <div class="fen_lf">
                                        <img src="img/66.png" alt="">
                                    </div>
                                    <div class="fen_cent">
                                        <h4 class="fnt_24 col_fff bld">1623</h4>
                                        <h3 class="fnt_14">人员</h3>
                                    </div>
                                    <div class="fen_rt" id="cart6">

                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="right-center">
                    <div class="title">
                        <h1> <i></i> <i></i> </h1> 客户数据统计
                    </div>
                    <div class="charts">
                        <div class="wrap">
                            <ul>
                                <li class="textfull1">
                                    <p class="p1 col_fff fnt_14 ">
                                        <img src="img/che1.png" alt="">
                                        凯骐典盛东风本田
                                    </p>
                                    <p class="p2 col_fff fnt_14"> <img src="img/ccd1.png" alt=""> 5 </p>
                                    <p class="p2 col_fff fnt_14"> <img src="img/ccd2.png" alt=""> 556 </p>
                                    <p class="p2 col_fff fnt_14"> <img src="img/ccd3.png" alt=""> 75 </p>
                                </li>
                                <li class="textfull1">
                                    <p class="p1 col_fff fnt_14 ">
                                        <img src="img/che1.png" alt="">
                                        凯骐典盛东风本田
                                    </p>
                                    <p class="p2 col_fff fnt_14"> <img src="img/ccd1.png" alt=""> 5 </p>
                                    <p class="p2 col_fff fnt_14"> <img src="img/ccd2.png" alt=""> 556 </p>
                                    <p class="p2 col_fff fnt_14"> <img src="img/ccd3.png" alt=""> 75 </p>
                                </li>
                                <li class="textfull1">
                                    <p class="p1 col_fff fnt_14 ">
                                        <img src="img/che1.png" alt="">
                                        凯骐典盛东风本田
                                    </p>
                                    <p class="p2 col_fff fnt_14"> <img src="img/ccd1.png" alt=""> 5 </p>
                                    <p class="p2 col_fff fnt_14"> <img src="img/ccd2.png" alt=""> 556 </p>
                                    <p class="p2 col_fff fnt_14"> <img src="img/ccd3.png" alt=""> 75 </p>
                                </li>
                                <li class="textfull1">
                                    <p class="p1 col_fff fnt_14 ">
                                        <img src="img/che1.png" alt="">
                                        凯骐典盛东风本田
                                    </p>
                                    <p class="p2 col_fff fnt_14"> <img src="img/ccd1.png" alt=""> 5 </p>
                                    <p class="p2 col_fff fnt_14"> <img src="img/ccd2.png" alt=""> 556 </p>
                                    <p class="p2 col_fff fnt_14"> <img src="img/ccd3.png" alt=""> 75 </p>
                                </li>
                                <li class="textfull1">
                                    <p class="p1 col_fff fnt_14 ">
                                        <img src="img/che1.png" alt="">
                                        凯骐典盛东风本田
                                    </p>
                                    <p class="p2 col_fff fnt_14"> <img src="img/ccd1.png" alt=""> 5 </p>
                                    <p class="p2 col_fff fnt_14"> <img src="img/ccd2.png" alt=""> 556 </p>
                                    <p class="p2 col_fff fnt_14"> <img src="img/ccd3.png" alt=""> 75 </p>
                                </li>
                                <li class="textfull1">
                                    <p class="p1 col_fff fnt_14 ">
                                        <img src="img/che1.png" alt="">
                                        凯骐典盛东风本田
                                    </p>
                                    <p class="p2 col_fff fnt_14"> <img src="img/ccd1.png" alt=""> 5 </p>
                                    <p class="p2 col_fff fnt_14"> <img src="img/ccd2.png" alt=""> 556 </p>
                                    <p class="p2 col_fff fnt_14"> <img src="img/ccd3.png" alt=""> 75 </p>
                                </li>
                                <li class="textfull1">
                                    <p class="p1 col_fff fnt_14 ">
                                        <img src="img/che1.png" alt="">
                                        凯骐典盛东风本田
                                    </p>
                                    <p class="p2 col_fff fnt_14"> <img src="img/ccd1.png" alt=""> 5 </p>
                                    <p class="p2 col_fff fnt_14"> <img src="img/ccd2.png" alt=""> 556 </p>
                                    <p class="p2 col_fff fnt_14"> <img src="img/ccd3.png" alt=""> 75 </p>
                                </li>
                                <li class="textfull1">
                                    <p class="p1 col_fff fnt_14 ">
                                        <img src="img/che1.png" alt="">
                                        凯骐典盛东风本田
                                    </p>
                                    <p class="p2 col_fff fnt_14"> <img src="img/ccd1.png" alt=""> 5 </p>
                                    <p class="p2 col_fff fnt_14"> <img src="img/ccd2.png" alt=""> 556 </p>
                                    <p class="p2 col_fff fnt_14"> <img src="img/ccd3.png" alt=""> 75 </p>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="right-bottom">
                    <div class="title">
                        <h1> <i></i> <i></i> </h1> 集团公告展示
                    </div>
                    <div class="charts">
                        <div class="adduser">
                            <ul>
                                <li><a href="javascript:;">
                                        <div class="adduser_lf">
                                            <img src="img/aad1.png" alt="">
                                            <em class="fnt_14 col_1">车辆数据</em>
                                        </div>
                                        <div class="adduser_rt">
                                            <p class="fnt_14 col_fff textfull1"><em>丨</em> 当前有 15 条车辆数据需要完善条车辆数据需要完善！！
                                            </p>
                                        </div>
                                    </a></li>
                                <li><a href="javascript:;">
                                        <div class="adduser_lf">
                                            <img src="img/aad2.png" alt="">
                                            <em class="fnt_14 col_2">车辆数据</em>
                                        </div>
                                        <div class="adduser_rt">
                                            <p class="fnt_14 col_fff textfull1"><em>丨</em> 当前有 15 条车辆数据需要完善条车辆数据需要完善！！
                                            </p>
                                        </div>
                                    </a></li>
                                <li><a href="javascript:;">
                                        <div class="adduser_lf">
                                            <img src="img/aad3.png" alt="">
                                            <em class="fnt_14 col_3">车辆数据</em>
                                        </div>
                                        <div class="adduser_rt">
                                            <p class="fnt_14 col_fff textfull1"><em>丨</em> 当前有 15 条车辆数据需要完善条车辆数据需要完善！！
                                            </p>
                                        </div>
                                    </a></li>
                                <li><a href="javascript:;">
                                        <div class="adduser_lf">
                                            <img src="img/aad4.png" alt="">
                                            <em class="fnt_14 col_4">车辆数据</em>
                                        </div>
                                        <div class="adduser_rt">
                                            <p class="fnt_14 col_fff textfull1"><em>丨</em> 当前有 15 条车辆数据需要完善条车辆数据需要完善！！
                                            </p>
                                        </div>
                                    </a></li>
                                <li><a href="javascript:;">
                                        <div class="adduser_lf">
                                            <img src="img/aad5.png" alt="">
                                            <em class="fnt_14 col_5">车辆数据</em>
                                        </div>
                                        <div class="adduser_rt">
                                            <p class="fnt_14 col_fff textfull1"><em>丨</em> 当前有 15 条车辆数据需要完善条车辆数据需要完善！！
                                            </p>
                                        </div>
                                    </a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="https://unpkg.com/layui@2.6.7/dist/layui.js"></script>
<script src="js/echarts.min.js"></script>
<script src="js/china.js"></script>
<script src="js/echarts.js"></script>

<script>
    var t = null;
    t = setTimeout(time, 1000); //開始运行
    function time() {
        clearTimeout(t); //清除定时器
        dt = new Date();
        var y = dt.getFullYear();
        var mt = dt.getMonth() + 1;
        var day = dt.getDate();
        var h = dt.getHours(); //获取时
        var m = dt.getMinutes(); //获取分
        var s = dt.getSeconds(); //获取秒
        var week;
        var weekDay = dt.getDay();
        if (weekDay == 0) {
            week = "星期日";
        } else if (weekDay == 1) {
            week = "星期一";
        } else if (weekDay == 2) {
            week = "星期二";
        } else if (weekDay == 3) {
            week = "星期三";
        } else if (weekDay == 4) {
            week = "星期四";
        } else if (weekDay == 5) {
            week = "星期五";
        } else if (weekDay == 6) {
            week = "星期六";
        }
        mt = padding(mt);
        day = padding(day);
        h = padding(h);
        m = padding(m);
        s = padding(s);

        var str = `
        <span class="col_fff col_14"> ${y}年${mt}月${day}日 ${week} </span>
                    <span class="fnt_16 col_fff bld">${h}:${m}:${s}</span>`;
        document.getElementById("showTime").innerHTML = str;
        t = setTimeout(time, 1000); //设定定时器，循环运行     
    }

    function padding(num, length = 2) {
        for (var len = (num + "").length; len < length; len = num.length) {
            num = "0" + num;
        }
        return num;
    }
    weather();

    function weather() {
        $.ajax({
            type: 'GET',
            url: "http://www.tianqiapi.com/api?version=v9&appid=23035354&appsecret=8YvlPNrz",
            success: function (res) {
                let data = res.data[0];
                console.log(data['tem1'])
                $('#tem').text(`${data['wea']}  ${data['tem2']}℃-${data['tem1']}℃`);
                // var obj = JSON.parse(result);
                // var smg = obj.data.forecast;
                // for (var s of smg) {
                //     var date = s.date;
                //     var high = s.high;
                //     var fengli = s.fengli;
                //     var low = s.low;
                //     var fengxiang = s.fengxiang;
                //     var type = s.type;
                //     var p = document.createElement("p");
                //     p.innerHTML = date + "<br>" + type + "<br>" +
                //         high + "<br>" + low + "<br>" + fengxiang + "<br>" + fengli;
                //     div.appendChild(p);
                // }
            }
        })
    }
</script>

</html>